<template>
    <div v-if="payIndex === 1">
        <div class="search-box">
            <icon class="search-icon" type="search" size="14" color="#b2b2b2" />
            <input class="search-input" confirm-type="search" placeholder="搜索客户名称/负责人"
                placeholder-style="color: #9EA1BB;letter-spacing:2rpx;" @input="inputEnter" />
        </div>
        <div class="transverse-line row">
            <div class="in-number">共有{{ totalCount == '' ? 0 : totalCount }}条记录</div>
            <div class="transverse-right align-flex">
                <view class="previously align-flex">
                    <poput-time display="true" :list='selectTimeListTwo' :default="timeIndexTwo" @cancel="onCancelTwo" />
                </view>
                <div class="compositor align-flex">
                    <picker @change="bindPickerChangeCompany" :value="allInsCompany" :range="gcpabaosi">
                        <view class="uni-input">{{ gcpabaosi[sortIndexTwo] }}</view>
                    </picker>
                    <img class="transverse-down" src="/static/score/dropdown.png" alt="" />
                </div>
                <div class="compositor align-flex">
                    <picker @change="bindPickerChange" :value="sortIndex" :range="sortArray">
                        <view class="uni-input">排序</view>
                    </picker>
                    <img class="transverse-down" src="/static/score/compositor.png" alt="" />
                </div>
            </div>
        </div>
        <!-- 第一个数据框 -->
        <div class="substance" v-for="(item) in detailData" :key="item.companyId"
            @click="goCompany(item.companyId, item.dealId)">
            <div class="rubric">{{ item.companyName }}</div>
            <div class="circumstance align-flex">
                <div class="circumstance-left">
                    <div class="exercise-problems align-flex">
                        <div class="nomenclature">商务负责人：</div>
                        <text class="explicit"> {{ item.businessPrincipal }} </text>
                    </div>
                    <div class="exercise-problems align-flex">
                        <div class="nomenclature">投保人数：</div>
                        <text class="explicit"> {{ item.numberOfInsured }} </text>
                    </div>
                    <div class="exercise-problems align-flex">
                        <div class="nomenclature">保费：</div>
                        <text class="explicit"> ¥{{ item.premium }} </text>
                    </div>
                    <div class="exercise-problems align-flex">
                        <div class="nomenclature">投保时间：</div>
                        <text class="explicit"> {{ item.insuredDate }} </text>
                    </div>
                </div>
            </div>
        </div>
        <no-Data v-if="totalCount == ''"></no-Data>
        <!-- 运营数据  排序弹窗 -->
        <div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineProps } from 'vue'
import { getDayAllCompany, getInsuranceDetail } from '@/api/quick'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import user from '@/utils/user'
import poputTime from '@/components/popup-custom-time/popup-custom-time.vue'
import { shake } from '@/utils/util'
import noData from '@/components/no-data/no-data.vue'
defineProps(['payIndex'])

onLoad(async () => {
    await user.waitLogin()
    const nowyear = new Date().getFullYear()
    const nowmonth = new Date().getMonth() + 1
    startTime.value = formatDate(new Date(nowyear, nowmonth - 1, 1))
    endTime.value = formatDate(new Date(nowyear, nowmonth, 0))
    await insuranceDetail()
    uni.$on('onReachBottom', function (data) {
        console.log('onReachBottom')
        getmore()
    })
})
const formatDate = (date: any) => {
    const myyear = date.getFullYear()
    let mymonth = date.getMonth() + 1
    let myweekday = date.getDate()
    if (mymonth < 10) {
        mymonth = "0" + mymonth
    }
    if (myweekday < 10) {
        myweekday = "0" + myweekday
    }
    return (myyear + "-" + mymonth + "-" + myweekday)
}
onLoad(async () => {
    allCompany.value = await getDayAllCompany(3)
    console.log(allCompany.value, 'allCompanyallCompanyallCompany')
    const arr = allCompany.value.map((ele) => {
        return ele.name
    })
    arr.unshift('全部保司')
    console.log(arr, 'csj')
    gcpabaosi.value = arr
    // allCompany.value.forEach((item:any, index:number) =>
    //     longCompanyName.value = [{...[allCompany.value[index].dictSort , allCompany.value[index].dictLabel]}, ...longCompanyName.value],
    // )
    // // longCompanyName.value = [...['全部保司']],
    // console.log(longCompanyName.value, 'allCompanyallCompany')
    // longCompanyName.value.forEach((item:any, index:number) => {
    //     console.log(item[0], item[1], '000000000000000000000')
    //     allInsCompany.value[item[0] + 1] = item[1]
    // })
    // allInsCompany.value[0] = '全部保司'
    // console.log(allInsCompany.value, '111111111111111111111111111111111')
})
const gcpabaosi = ref([])
const allCompany = ref()
const allInsCompany = ref([] as string[])

// 到达底部
const getmore = () => {
    if (!hasNextPage.value) {
        return
    }
    pageNum.value += 1
    insuranceDetail()
}

/* 销售记录昨天 弹窗 */
const popup = ref()
const open = (param: string) => {
    type.value = param
    popup.value.open('top')
    isPopup.value = true
    isCustom.value = false
}
const type = ref('')
const show = ref(false)

// 时间框选择
const time = ref([
    {
        name: '昨天',
        id: 1
    },
    {
        name: '今天',
        id: 2
    },
    {
        name: '本周',
        id: 3
    },
    {
        name: '本月',
        id: 4
    }
])

// 今天、昨天、本周、本月切换
const cut = ref(1)
const change = (param: number) => {
    console.log(param)
    cut.value = param
}

// 时间范围
const rangeTime = ref([
    new Date(new Date().getTime() - 86400000).toLocaleDateString(),
    new Date().toLocaleDateString()
])
const isCustom = ref(false)
const isPopup = ref(true)

// 返回时间
const onRangeTime = (time: [string]) => {
    console.log(time, '时间回调')
    show.value = false
    isPopup.value = false
}

// 点击自定义触发
const custom = () => {
    isCustom.value = true
    isPopup.value = true
    show.value = true
}

/* 运营数据 排序 弹窗 */

const sortIndex = ref(0)
const sortArray = ref(['按投保时间倒序', '按投保时间正序', '按保费降序', '按保费升序'])
const bindPickerChange = function (e: any) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    sortIndex.value = e.detail.value
    insuranceDetail()
}

// '昨天', '今天', '明天', '本月' 切换函数
const itemRangeOne = ref('')
const itemRangeTwo = ref('')
// 选择时间
const selectTimeListTwo = ref(['昨天', '今天', '本周', '本月', '上月'])
const timeIndexTwo = ref(3)
const itemRange = ref('' as string | undefined)
// '昨天', '今天', '明天', '本月' 切换函数
const onCancelTwo = async (index: { index: number, time: undefined | string }) => {
    console.log(index, 'indexindex')
    timeIndexTwo.value = Number(index.index)
    itemRange.value = index.time
    if (index.index === 1000) {
        itemRangeOne.value = itemRange.value.substring(0, 10)
        itemRangeTwo.value = itemRange.value.substring(13, 23)
    } else {
        // eslint-disable-next-line no-unused-expressions
        startTime.value = index.startTime
        // eslint-disable-next-line no-unused-expressions
        endTime.value = index.endTime
    }
    console.log('切换了吗')
    pageNum.value = 1
    await insuranceDetail()
}
const hasNextPage = ref(true)

// 全部保司 公司 变量
const longCompanyName = ref([] as string[])
// const insuranceDate = ref(['100万'] as string[])
const sortIndexTwo = ref(0)
// 公司
const bindPickerChangeCompany = async (e: any) => {
    sortIndexTwo.value = e.detail.value
    console.log('picker发送选择改变，携带值为2222222222222222222222222', e.detail.value)
    pageNum.value = 1
    await insuranceDetail()
    console.log(sortIndexTwo.value, '哈哈哈哈哈哈')
}

// 日日保业绩  投保明细
const detailData = ref()
const totalCount = ref()
const pageNum = ref(1)
const startTime = ref('')
const endTime = ref('')
const insuranceDetail = async () => {
    if (pageNum.value === 1) {
        detailData.value = []
        pageNum.value = 1
        hasNextPage.value = true
    }
    const result = await getInsuranceDetail({
        pageNum: pageNum.value,
        pageSize: 20,
        searchText: inputValue.value,
        startTime: timeIndexTwo.value === 1000 ? itemRangeOne.value : startTime.value,
        endTime: timeIndexTwo.value === 1000 ? itemRangeTwo.value : endTime.value,
        sortOrder: sortIndex.value,
        insurCompanyCode:
            sortIndexTwo.value === 0 || sortIndexTwo.value=== '0' 
                ? ''
                : allCompany.value[sortIndexTwo.value - 1].insurCompany,
        insureCompanyType: 'insure_type_tyrb'
    })
    console.log(result, '投保明细')
    //   detailData.value = result.list
    //   totalCount.value = result.totalCount

    if (!result.hasNextPage) {
        hasNextPage.value = false
    }
    console.log(hasNextPage.value, '小起小起')
    const arr = []
    arr.push(...detailData.value)
    arr.push(...result.list)
    detailData.value = arr
    console.log(detailData.value, 'longInsuranceData')
    totalCount.value = result.totalCount
}

// input框输入事件
const inputValue = ref('')
const inputEnter = (e: any) => {
    shake(() => {
        console.log(e.detail.value, 'eeeeeany')
        inputValue.value = e.detail.value
        pageNum.value = 1
        insuranceDetail()
    }, 300)
}

const goCompany = (companyId: number, dealId: number) => {
    if (!dealId) {
    } else {
        console.log(companyId, '公司id', dealId, 'dealId')
        const company = companyId
        const deal = dealId
        uni.navigateTo({
            url: '/packageRemind/pages/gcpa-insurance-detail/index?id=' + company + '&dealId=' + deal
        })
    }
}
</script>

<style lang="scss" scoped>
.transverse-line {
    box-sizing: border-box;
    padding: 0 30rpx;
    color: #565868;
    font-size: $font-normal;

    .previously,
    .spectacle,
    .compositor {
        box-sizing: border-box;
        padding-left: 30rpx;
        font-weight: 400;
    }

    .in-number {
        font-weight: 400;
        color: $grey;
    }
}

/* payIndex==1 部分 */
.search-box {
    margin: 30rpx;
}

.substance {
    box-sizing: border-box;
    padding: 30rpx;
    background: #fff;
    margin: 30rpx;

    .rubric {
        font-size: $font-medium;
        font-weight: 600;
        color: $black;
        padding-bottom: 30rpx;
        border-bottom: 1rpx solid #f4f4f7;
    }

    .exercise-problems {
        padding-top: 30rpx;
        font-size: $font-normal;
        font-weight: 400;
        color: $grey;

        .explicit {
            color: $black;
        }

        .nomenclature {
            width: 165rpx;
        }
    }

    .circumstance-right {
        padding-left: 58rpx;
    }
}

.transverse-down {
    width: 24rpx;
    height: 24rpx;
    margin-left: 8rpx;
}

.pop-up {
    border-radius: 16rpx;

    .choices {
        width: 750rpx;
        height: 564rpx;
        background: #ffffff;
        opacity: 1;
        box-sizing: border-box;
        padding: 30rpx;
        border-radius: 16rpx;

        .custom-img {
            width: 36rpx;
            height: 36rpx;
        }

        .select-while {
            font-size: $font-medium;
            font-weight: bold;
            color: $black;
            padding: 30rpx;
        }
    }

    .choices-picker {
        height: 800rpx;
    }

    .sequence-time {
        padding: 20rpx 30rpx 27rpx 29rpx;
        display: flex;
        justify-content: space-between;

        .specific-blue {
            color: $blue;
        }

        .hook {
            width: 20rpx;
            height: 13rpx;
            color: $blue;
        }
    }
}

.second-popup {
    width: 750rpx;
    height: 388rpx;
    background: #ffffff;
    box-sizing: border-box;
    padding: 60rpx 60rpx 27rpx 60rpx;

    .select-spectacle {
        font-size: $font-medium;
        font-weight: bold;
        color: $black;
    }

    .status-box {
        color: #565868;
        padding-top: 50rpx;
        display: flex;
        justify-content: space-between;

        .hook {
            width: 20rpx;
            height: 13rpx;
            color: $blue;
        }
    }

    .status-box-blue {
        color: $blue;
    }
}

.third-popup {
    height: 564rpx;
}</style>
